import React, { useState } from 'react'
import {
  StyleSheet,
  View,
  Button,
  NativeModules,
  Image,
  Text,
  Animated,
  LayoutAnimation
} from 'react-native'
import { avatarUri } from '@/constants/Uri'
import NativeInfoView from './NativeInfoView'
export default () => {
  const [display, setdisplay] = useState(false)
  return (
    <View style={styles.root}>
      <Button
        title="调用原生方法"
        onPress={() => {
          const { App } = NativeModules
          if (!App) {
            return console.warn('暂时找不到NativeModules的App')
          }

          App?.openGallery() // 开启相册 (AppModule桥接原生.java)

          // AppModule桥接原生.java
          App?.getVersionName().then((data: string) => {
            console.log(`versionName=${data}`)
          })

          // const { versionName, versionCode } = App
          // console.log(`versionName=${versionName}, versionCode=${versionCode}`)
        }}
      />

      <Button
        title="调用toastExample原生模块"
        onPress={() => {
          const { ToastExample } = NativeModules
          if (!ToastExample) {
            return console.warn('暂时找不到NativeModules的ToastExample')
          }
          ToastExample.show('Awesome！！！！', ToastExample.SHORT)
        }}
      />

      <View>
        <Button
          title="调用toastExample原生页面"
          onPress={() => {
            setdisplay(!display)
            // LayoutAnimation.spring();
            LayoutAnimation.easeInEaseOut()
          }}
        />
        {display && <NativeInfoView />}
      </View>
    </View>
  )
}

const styles = StyleSheet.create({
  root: {
    width: '100%',
    height: 600,
    backgroundColor: 'white'
  },
  content: {
    width: '100%',
    height: 120,
    flexDirection: 'row',
    alignItems: 'center',
    paddingHorizontal: 16,
    paddingTop: 10,
    backgroundColor: 'white'
  },
  avatarImg: {
    width: 100,
    height: 100,
    resizeMode: 'contain',
    borderRadius: 50
  },
  nameLayout: {
    flex: 1,
    flexDirection: 'column',
    marginLeft: 16
  },
  nameTxt: {
    fontSize: 20,
    color: '#333',
    fontWeight: 'bold',
    marginTop: 4
  },
  descTxt: {
    fontSize: 16,
    color: '#666',
    marginTop: 4
  },
})
